<template>
	<view class="content-class">
		<view class="content-center">
			<div class="size-data" :style="{top:`${i.top}px`,left:`${i.left}px`}" v-for="(i,iIndex) in sizesData"
				:key="iIndex">{{i.data}}
			</div>
			<u-image height="357px" mode="aspectFit" :src="head"></u-image>
		</view>
		<view class="content-grid">
			<u-row>
				<u-col :span="2" align="center">中标</u-col>
				<u-col :span="5" align="center">戒指内直径(mm)</u-col>
				<u-col :span="5" align="center">戒指内周长(mm)</u-col>
			</u-row>
			<u-row v-for="(i,iIndex) in ringSizes" :key="iIndex" style="font-size: 12px;">
				<u-col :span="2" align="center">{{i.size}}</u-col>
				<u-col :span="5" align="center">{{i.inner_diameter_mm}}</u-col>
				<u-col :span="5" align="center">{{i.inner_circumference_mm}}</u-col>
			</u-row>
		</view>
		<view class="bottom-btn">
			<view class="sport-btn" @click="skipPage">返回首页</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sizesData: [{
					top: 100,
					left: 6,
					data: '12#'
				}, {
					top: 35,
					left: 60,
					data: '18#'
				}, {
					top: 18,
					left: 135,
					data: '20#'
				}, {
					top: 52,
					left: 200,
					data: '20#'
				}, {
					top: 215,
					left: 273,
					data: '23#'
				}],
				ringSizes: [{
						"size": "12#",
						"inner_diameter_mm": 16.50,
						"inner_circumference_mm": 51.81
					},
					{
						"size": "14#",
						"inner_diameter_mm": 17.30,
						"inner_circumference_mm": 54.322
					},
					{
						"size": "16#",
						"inner_diameter_mm": 18.10,
						"inner_circumference_mm": 56.834
					},
					{
						"size": "18#",
						"inner_diameter_mm": 18.90,
						"inner_circumference_mm": 59.346
					},
					{
						"size": "20#",
						"inner_diameter_mm": 19.80,
						"inner_circumference_mm": 62.172
					},
					{
						"size": "23#",
						"inner_diameter_mm": 20.60,
						"inner_circumference_mm": 64.684
					},
					{
						"size": "25#",
						"inner_diameter_mm": 21.40,
						"inner_circumference_mm": 67.196
					}
				],
				head: require('../../../static/images/measuring/zwcl-head.png'),
			};
		},
		methods: {
			skipPage() {
				uni.reLaunch({
					url: "/pages/HomePage/HomePage"
				})
			}
		},
	};
</script>
<style>
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #0B0F12 !important;
	}
</style>
<style scoped lang="scss">
	::v-deep .bottom-btn {
		background-color: #1B1B1B;
		margin: 0;
		padding: 0;
		width: 100%;

		.sport-btn {
			margin-top: 10px;
		}
	}

	.content-class {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15px 15px;
		height: 100%;
		padding-bottom: 85px;

		.content-grid {
			border-radius: 6px;
			background-color: #1B1B1B;
			width: 100%;
			display: flex;
			flex-direction: column;
			padding: 8px 0px;
			gap: 3px;

			.u-row {
				padding: 2px 0px;
			}

			span {
				font-size: 16px;
				position: absolute;
				top: 40px;
				left: 50%;
				transform: translateX(-50%);
				z-index: 999;
				white-space: nowrap;
			}
		}

		.content-center {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 40px;

			.size-data {
				position: absolute;
				top: 18px;
				z-index: 99999
			}
		}
	}
</style>